<!--
 * @Author: 追逐的娃 kangchao_php@163.com
 * @Date: 2024-10-25 17:51:16
 * @LastEditors: 追逐的娃 kangchao_php@163.com
 * @LastEditTime: 2024-10-31 13:50:10
 * @FilePath: \vue-project\src\components\Preview\FilePreview.vue
 * @Description: 
 * 
-->
<!--
 * @Author: 追逐的娃 kangchao_php@163.com
 * @Date: 2024-10-25 17:51:16
 * @LastEditors: 追逐的娃 kangchao_php@163.com
 * @LastEditTime: 2024-10-28 13:38:32
 * @FilePath: \vue-project\src\components\FilePreview.vue
 * @Description: 
 * 
-->
<template>
  <div>
    <a-modal
      class="animate__animated animate__zoomIn"
      v-model:visible="visible"
      :width="700"
      :title="type + '预览'"
      @cancel="handleClose"
    >
      <!-- word -->
      <word-preview :src="filePath" v-if="type == 'word'" style="height: 80vh" />
      <!-- excel -->
      <excel-preview :src="filePath" v-if="type == 'excel'" style="height: 80vh" />
      <!-- pdf -->
      <PdfPreview :src="filePath" v-else-if="type == 'pdf'" style="height: 80vh" />
      <!-- 图片 -->
      <image-preview v-else-if="type == 'image'" :images="images" style="height: 80vh" />

      <template #footer>
        <div class="flex justify-center">
          <a-button @click="handleClose">关闭预览</a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>


<script setup>
import { ref, watch } from 'vue'
//word组件
import WordPreview from './WordPreview.vue'
//excel组件
import ExcelPreview from './ExcelPreview.vue'
// pdf组件
import PdfPreview from './PdfPreview.vue'
//图片组件
import ImagePreview from './ImagePreview.vue'
import { getFileType } from '@/utils/util'

const props = defineProps({
  filePath: {
    type: String,
    default: ''
  }
})

const type = ref('')
const visible = ref(false)
const images = ref([])

const emits = defineEmits(['closeModal'])

const handleClose = () => {
  visible.value = false
  type.value = ''
  images.value = []
  emits('closeModal')
}
watch(
  () => props.filePath,
  (val) => {
    if (val) {
      type.value = getFileType(val)
      if (type.value == 'image') {
        images.value.push(val)
      }
      visible.value = true
    }
  },
  { immediate: true }
)
</script>

<style lang="scss" scoped>
</style>